<template>
  <div class="enterprise-info-container">
    <div class="page-header">
      <h2>企业信息管理</h2>
      <p>管理您的企业信息，为定制服务提供更精准的支持</p>
        </div>
      
    <el-card class="main-card">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本信息" name="basicInfo">
      <el-form 
            ref="basicInfoFormRef"
        :model="enterpriseForm" 
        :rules="enterpriseRules" 
        label-width="120px"
            class="enterprise-form"
          >
        <el-form-item label="企业名称" prop="name">
              <el-input v-model="enterpriseForm.name" placeholder="请输入企业名称" />
        </el-form-item>
        
        <el-form-item label="统一社会信用代码" prop="creditCode">
              <el-input v-model="enterpriseForm.creditCode" placeholder="请输入统一社会信用代码" />
        </el-form-item>
        
        <el-form-item label="企业类型" prop="type">
          <el-select v-model="enterpriseForm.type" placeholder="请选择企业类型" style="width: 100%">
                <el-option v-for="item in enterpriseTypes" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        
            <el-form-item label="所属行业" prop="industry">
          <el-cascader
            v-model="enterpriseForm.industry"
                :options="industries"
                :props="{ checkStrictly: true }"
                placeholder="请选择所属行业"
                clearable
                style="width: 100%"
              />
            </el-form-item>
            
            <el-form-item label="成立日期" prop="establishDate">
              <el-date-picker 
                v-model="enterpriseForm.establishDate" 
                type="date" 
                placeholder="选择日期" 
                style="width: 100%"
              />
        </el-form-item>
        
        <el-form-item label="企业规模" prop="scale">
              <el-radio-group v-model="enterpriseForm.scale">
                <el-radio label="small">小型企业（50人以下）</el-radio>
                <el-radio label="medium">中型企业（50-500人）</el-radio>
                <el-radio label="large">大型企业（500人以上）</el-radio>
              </el-radio-group>
        </el-form-item>
        
        <el-form-item label="企业地址" prop="address">
              <el-input v-model="enterpriseForm.address" placeholder="请输入企业地址" />
            </el-form-item>
            
            <el-form-item label="企业简介" prop="description">
              <el-input 
                v-model="enterpriseForm.description" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入企业简介"
              />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="submitEnterpriseInfo">保存修改</el-button>
              <el-button @click="resetEnterpriseInfo">重置</el-button>
        </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="联系人信息" name="contactInfo">
          <el-form 
            ref="contactFormRef"
            :model="contactForm" 
            :rules="contactRules" 
            label-width="120px" 
            class="enterprise-form"
          >
            <el-form-item label="联系人姓名" prop="name">
              <el-input v-model="contactForm.name" placeholder="请输入联系人姓名" />
            </el-form-item>
            
            <el-form-item label="职位" prop="position">
              <el-input v-model="contactForm.position" placeholder="请输入职位" />
        </el-form-item>
        
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="contactForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        
            <el-form-item label="固定电话" prop="tel">
              <el-input v-model="contactForm.tel" placeholder="请输入固定电话" />
        </el-form-item>
        
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="contactForm.email" placeholder="请输入电子邮箱" />
        </el-form-item>
        
            <el-form-item>
              <el-button type="primary" @click="submitContactInfo">保存修改</el-button>
              <el-button @click="resetContactInfo">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="订购需求" name="requirements">
          <el-form 
            ref="requirementsFormRef"
            :model="requirementsForm" 
            label-width="120px" 
            class="enterprise-form"
          >
            <el-form-item label="常规订购周期">
              <el-radio-group v-model="requirementsForm.orderCycle">
                <el-radio label="monthly">每月</el-radio>
                <el-radio label="quarterly">每季度</el-radio>
                <el-radio label="halfYear">每半年</el-radio>
                <el-radio label="yearly">每年</el-radio>
                <el-radio label="irregular">不固定</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="常规订购数量">
              <el-input-number v-model="requirementsForm.orderQuantity" :min="1" :max="10000" />
            </el-form-item>
            
            <el-form-item label="预算范围">
              <el-slider
                v-model="requirementsForm.budgetRange"
                range
                :min="1000"
                :max="100000"
                :step="1000"
                :marks="{
                  1000: '¥1000',
                  20000: '¥20000',
                  50000: '¥50000',
                  100000: '¥100000'
                }"
              />
            </el-form-item>
            
            <el-form-item label="特殊要求">
              <el-checkbox-group v-model="requirementsForm.specialRequirements">
                <el-checkbox label="快速交付">快速交付</el-checkbox>
                <el-checkbox label="环保材料">环保材料</el-checkbox>
                <el-checkbox label="定制Logo">定制Logo</el-checkbox>
                <el-checkbox label="批量生产">批量生产</el-checkbox>
                <el-checkbox label="特殊尺码">特殊尺码</el-checkbox>
              </el-checkbox-group>
        </el-form-item>
        
            <el-form-item label="其他需求说明">
              <el-input 
                v-model="requirementsForm.otherRequirements" 
                type="textarea" 
                :rows="4" 
                placeholder="请输入其他需求说明"
              />
        </el-form-item>
        
        <el-form-item>
              <el-button type="primary" @click="submitRequirements">保存修改</el-button>
              <el-button @click="resetRequirementsForm">重置</el-button>
        </el-form-item>
      </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="发票信息" name="invoiceInfo">
          <el-form 
            ref="invoiceFormRef"
            :model="invoiceForm" 
            :rules="invoiceRules" 
            label-width="120px" 
            class="enterprise-form"
          >
            <el-form-item label="发票类型" prop="type">
              <el-radio-group v-model="invoiceForm.type">
                <el-radio label="vat">增值税专用发票</el-radio>
                <el-radio label="normal">普通发票</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="发票抬头" prop="title">
              <el-input v-model="invoiceForm.title" placeholder="请输入发票抬头" />
            </el-form-item>
            
            <el-form-item label="纳税人识别号" prop="taxNumber">
              <el-input v-model="invoiceForm.taxNumber" placeholder="请输入纳税人识别号" />
            </el-form-item>
            
            <template v-if="invoiceForm.type === 'vat'">
              <el-form-item label="注册地址" prop="registerAddress">
                <el-input v-model="invoiceForm.registerAddress" placeholder="请输入注册地址" />
              </el-form-item>
              
              <el-form-item label="注册电话" prop="registerPhone">
                <el-input v-model="invoiceForm.registerPhone" placeholder="请输入注册电话" />
              </el-form-item>
              
              <el-form-item label="开户银行" prop="bankName">
                <el-input v-model="invoiceForm.bankName" placeholder="请输入开户银行" />
              </el-form-item>
              
              <el-form-item label="银行账号" prop="bankAccount">
                <el-input v-model="invoiceForm.bankAccount" placeholder="请输入银行账号" />
              </el-form-item>
            </template>
            
            <el-form-item label="收票人姓名" prop="receiverName">
              <el-input v-model="invoiceForm.receiverName" placeholder="请输入收票人姓名" />
            </el-form-item>
            
            <el-form-item label="收票人电话" prop="receiverPhone">
              <el-input v-model="invoiceForm.receiverPhone" placeholder="请输入收票人电话" />
            </el-form-item>
            
            <el-form-item label="收票人地址" prop="receiverAddress">
              <el-input v-model="invoiceForm.receiverAddress" placeholder="请输入收票人地址" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="submitInvoiceInfo">保存修改</el-button>
              <el-button @click="resetInvoiceInfo">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'EnterpriseInfo',
  setup() {
    // 当前活动标签页
    const activeTab = ref('basicInfo')
    
    // 企业类型选项
    const enterpriseTypes = [
      { value: 'stateOwned', label: '国有企业' },
      { value: 'private', label: '民营企业' },
      { value: 'foreign', label: '外资企业' },
      { value: 'joint', label: '合资企业' },
      { value: 'individual', label: '个体工商户' },
      { value: 'other', label: '其他' }
    ]
    
    // 行业选项
    const industries = [
      {
        value: 'manufacturing',
        label: '制造业',
        children: [
          {
            value: 'textile',
            label: '纺织业',
            children: [
              { value: 'clothing', label: '服装制造' },
              { value: 'fabric', label: '面料制造' }
            ]
          },
          {
            value: 'electronics',
            label: '电子制造业'
          }
        ]
      },
      {
        value: 'service',
        label: '服务业',
        children: [
          { value: 'education', label: '教育培训' },
          { value: 'healthcare', label: '医疗健康' },
          { value: 'finance', label: '金融服务' }
        ]
      },
      {
        value: 'retail',
        label: '零售业',
        children: [
          { value: 'clothing_retail', label: '服装零售' },
          { value: 'electronics_retail', label: '电子产品零售' }
        ]
      }
    ]
    
    // 基本信息表单
    const basicInfoFormRef = ref(null)
    const enterpriseForm = reactive({
      name: '示例企业有限公司',
      creditCode: '91110105MA00B7GT2F',
      type: 'private',
      industry: ['manufacturing', 'textile', 'clothing'],
      establishDate: new Date('2010-05-15'),
      scale: 'medium',
      address: '北京市朝阳区建国路88号',
      description: '我们是一家专注于服装定制的企业，为各类企业提供高品质的团体服装定制服务。'
    })
    
    const enterpriseRules = {
      name: [
        { required: true, message: '请输入企业名称', trigger: 'blur' }
      ],
      creditCode: [
        { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
        { pattern: /^[0-9A-Z]{18}$/, message: '统一社会信用代码格式不正确', trigger: 'blur' }
      ],
      type: [
        { required: true, message: '请选择企业类型', trigger: 'change' }
      ],
      industry: [
        { required: true, message: '请选择所属行业', trigger: 'change' }
      ],
      establishDate: [
        { required: true, message: '请选择成立日期', trigger: 'change' }
      ],
      scale: [
        { required: true, message: '请选择企业规模', trigger: 'change' }
      ],
      address: [
        { required: true, message: '请输入企业地址', trigger: 'blur' }
      ]
    }
    
    // 联系人信息表单
    const contactFormRef = ref(null)
    const contactForm = reactive({
      name: '张三',
      position: '采购经理',
      phone: '13800138000',
      tel: '010-88888888',
      email: 'zhangsan@example.com'
    })
    
    const contactRules = {
      name: [
        { required: true, message: '请输入联系人姓名', trigger: 'blur' }
      ],
      position: [
        { required: true, message: '请输入职位', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ]
    }
    
    // 订购需求表单
    const requirementsFormRef = ref(null)
    const requirementsForm = reactive({
      orderCycle: 'quarterly',
      orderQuantity: 100,
      budgetRange: [10000, 50000],
      specialRequirements: ['定制Logo', '批量生产'],
      otherRequirements: '希望能提供多种面料样品供选择，并且能够根据企业VI进行个性化定制。'
    })
    
    // 发票信息表单
    const invoiceFormRef = ref(null)
    const invoiceForm = reactive({
      type: 'vat',
      title: '示例企业有限公司',
      taxNumber: '91110105MA00B7GT2F',
      registerAddress: '北京市朝阳区建国路88号',
      registerPhone: '010-88888888',
      bankName: '中国工商银行北京分行',
      bankAccount: '6222021234567890123',
      receiverName: '李四',
      receiverPhone: '13900139000',
      receiverAddress: '北京市海淀区中关村南大街5号'
    })
    
    const invoiceRules = {
      type: [
        { required: true, message: '请选择发票类型', trigger: 'change' }
      ],
      title: [
        { required: true, message: '请输入发票抬头', trigger: 'blur' }
      ],
      taxNumber: [
        { required: true, message: '请输入纳税人识别号', trigger: 'blur' }
      ],
      registerAddress: [
        { required: true, message: '请输入注册地址', trigger: 'blur' }
      ],
      registerPhone: [
        { required: true, message: '请输入注册电话', trigger: 'blur' }
      ],
      bankName: [
        { required: true, message: '请输入开户银行', trigger: 'blur' }
      ],
      bankAccount: [
        { required: true, message: '请输入银行账号', trigger: 'blur' }
      ],
      receiverName: [
        { required: true, message: '请输入收票人姓名', trigger: 'blur' }
      ],
      receiverPhone: [
        { required: true, message: '请输入收票人电话', trigger: 'blur' }
      ],
      receiverAddress: [
        { required: true, message: '请输入收票人地址', trigger: 'blur' }
      ]
    }
    
    // 监听发票类型变化，动态验证规则
    watch(() => invoiceForm.type, (newType) => {
      if (newType === 'normal') {
        delete invoiceRules.registerAddress
        delete invoiceRules.registerPhone
        delete invoiceRules.bankName
        delete invoiceRules.bankAccount
      } else {
        invoiceRules.registerAddress = [
          { required: true, message: '请输入注册地址', trigger: 'blur' }
        ]
        invoiceRules.registerPhone = [
          { required: true, message: '请输入注册电话', trigger: 'blur' }
        ]
        invoiceRules.bankName = [
          { required: true, message: '请输入开户银行', trigger: 'blur' }
        ]
        invoiceRules.bankAccount = [
          { required: true, message: '请输入银行账号', trigger: 'blur' }
        ]
      }
    })
    
    // 提交企业基本信息
    const submitEnterpriseInfo = () => {
      basicInfoFormRef.value.validate((valid) => {
        if (valid) {
          // 这里应该有API调用保存企业信息
          ElMessage.success('企业基本信息保存成功')
        } else {
          ElMessage.error('请填写正确的信息')
          return false
        }
      })
    }
    
    // 重置企业基本信息
    const resetEnterpriseInfo = () => {
      basicInfoFormRef.value.resetFields()
    }
    
    // 提交联系人信息
    const submitContactInfo = () => {
      contactFormRef.value.validate((valid) => {
        if (valid) {
          // 这里应该有API调用保存联系人信息
          ElMessage.success('联系人信息保存成功')
        } else {
          ElMessage.error('请填写正确的信息')
          return false
        }
      })
    }
    
    // 重置联系人信息
    const resetContactInfo = () => {
      contactFormRef.value.resetFields()
    }
    
    // 提交订购需求
    const submitRequirements = () => {
      // 这里应该有API调用保存订购需求
      ElMessage.success('订购需求保存成功')
    }
    
    // 重置订购需求
    const resetRequirementsForm = () => {
      requirementsFormRef.value && requirementsFormRef.value.resetFields()
    }
    
    // 提交发票信息
    const submitInvoiceInfo = () => {
      invoiceFormRef.value.validate((valid) => {
        if (valid) {
          // 这里应该有API调用保存发票信息
          ElMessage.success('发票信息保存成功')
        } else {
          ElMessage.error('请填写正确的信息')
          return false
        }
      })
    }
    
    // 重置发票信息
    const resetInvoiceInfo = () => {
      invoiceFormRef.value.resetFields()
    }
    
    // 初始化
    onMounted(() => {
      // 可以在这里调用API获取企业信息
    })
    
    return {
      activeTab,
      enterpriseTypes,
      industries,
      
      basicInfoFormRef,
      enterpriseForm,
      enterpriseRules,
      submitEnterpriseInfo,
      resetEnterpriseInfo,
      
      contactFormRef,
      contactForm,
      contactRules,
      submitContactInfo,
      resetContactInfo,
      
      requirementsFormRef,
      requirementsForm,
      submitRequirements,
      resetRequirementsForm,
      
      invoiceFormRef,
      invoiceForm,
      invoiceRules,
      submitInvoiceInfo,
      resetInvoiceInfo
    }
  }
}
</script>

<style scoped>
.enterprise-info-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 500;
}

.page-header p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.main-card {
  margin-bottom: 24px;
}

.enterprise-form {
  max-width: 600px;
  margin: 20px auto;
}

.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
</style> 